import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { PipesModule } from '@pipes/pipes.module';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

import { BackButtonDirective } from '@directives/back-button.directive';
import { ImgStateDirective } from '@directives/img-state.directive';
import { ImgStateUrlDirective } from '@directives/img-state-url.directive';
import { ImgLazyLoadDirective } from '@directives/img-lazy-load.directive';
import { AutoresizeDirective } from '@directives/autoresize-textarea.directive';

// AoT requires an exported function for factories
export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient, 'assets/i18n/', '.json');
}

@NgModule({
  imports: [
    PipesModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    }),
  ],
  declarations: [BackButtonDirective, ImgStateDirective, ImgStateUrlDirective, ImgLazyLoadDirective, AutoresizeDirective],
  providers: [], // better be empty!
  exports: [
    CommonModule,
    FormsModule,
    PipesModule,
    TranslateModule,
    BackButtonDirective,
    ImgStateDirective,
    ImgStateUrlDirective,
    ImgLazyLoadDirective,
    AutoresizeDirective
  ],
})
export class SharedModule { }
